import { Container } from '../../react-dom/src/hostConfig';
import {
	unstable_ImmediatePriority,
	unstable_runWithPriority
} from 'scheduler';
import { ReactElementType } from '../../shared/ReactTypes';
import { FiberNode, FiberRootNode } from './fiber';
import { requestUpdateLane } from './fiberLanes';
import {
	createUpdate,
	createUpdateQueue,
	enqueueUpdate,
	UpdateQueue
} from './updateQueue';
import { scheduleUpdateOnFiber } from './workLoop';
import { HostRoot } from './workTags';

// 协调器的 总入口

// react.createRoot 要调用的api
// 该方法的作用是 创建一个 fiberRootNode
// 并 创建一个 hostRootFiber 为 根节点对应的 Fiber
// fiberRootNode.cirrent = hostRootFiber
export function createContainer(container: Container) {
	const hostRootFiber = new FiberNode(HostRoot, {}, null);
	const root = new FiberRootNode(container, hostRootFiber);
	hostRootFiber.updateQueue = createUpdateQueue();
	return root;
}

// react.createRoot(container).render(<App/>
// 传入一个 app 也激素 reactElement 类型
//  还有就是 root 节点  也就是 FiberRootNode
export function updateContainer(
	element: ReactElementType | null,
	root: FiberRootNode
) {
	// 然后   创建 一个 update 更新
	// 然后 将 更新 添加到 hostRootFiber 根Fiber的 updateQueue 消费更新队列中

	// 然后 调用scheduleUpdateOnFiber 将 根Fiber 传入调度器 去调度 更新

	// 18 默认启用同步更新 只有使用了 并发特性的时候才会启用 异步更新
	// unstable_runWithPriority 传入unstable_ImmediatePriority 的 作用是 即将上下文中的优先级 设置为 同步 更新

	unstable_runWithPriority(unstable_ImmediatePriority, () => {
		const hostRootFiber = root.current;
		// 首次渲染 他的 lane 是 采用 scheduler 上下文中的优先级
		// 因为 首次渲染上面设定了是ImmediatePriority scheduler 上下文中的优先级 是1
		// 所以这里获取的 优先级 会是 SyncLane 就是 同步 微任务去调度的
		const lane = requestUpdateLane();
		const update = createUpdate<ReactElementType | null>(element, lane);
		enqueueUpdate(
			hostRootFiber.updateQueue as UpdateQueue<ReactElementType | null>,
			update,
			hostRootFiber,
			lane
		);
		// 根据 测试首次渲染 应该是 放入 宏任务队列的 不是 微任务队列的
		scheduleUpdateOnFiber(hostRootFiber, lane);
	});
	return element;
}
